<template>
  <div ref="canvasContainer2" class="canvas-circle2-container">
    <canvas :id="id" style="height: 100%;width: 100%;" />
  </div>
</template>

<script>
export default {
  name: 'CanvasCircle2',
  props: [
    'id', // 画布id
    'percent', // 百分比数据
    'bgColor', // 背景色
    'lightColor', // 高亮色
    'textPosition' // left or right 文本的显示位置
  ],
  data() {
    return {
      canvas: '',
      context: '',
      cirX: '',
      cirY: '',
      r: '',
      rInner: '',
      rBlack: '',
      rBlackSmall: '',
      outLine: '', // 标题伸出去的距离
      number: 0,
      zoomFactor: '0.6', // 圆环半径的缩放因子
      datas: [
        { title: '项目1', num: 6 },
        { title: '项目2', num: 30 },
        { title: '项目3', num: 20 },
        { title: '项目4', num: 4 }
      ],
      datasInner: [
        { title: '项目5', num: 6 },
        { title: '项目6', num: 30 }
      ]
    }
  },
  mounted() {
    this.initCanvas()
    this.initParams()
    this.drawBgCircle()
    this.drawPartArc(this.datas, this.r)
    this.drawBlackCircle(this.rBlack)
    this.drawPartArc(this.datasInner, this.rInner)
    this.drawBlackCircle(this.rBlackSmall)
    window.addEventListener('resize', this.resizeCanvas, false)
  },
  methods: {
    // 初始化
    initCanvas() {
      this.canvas = document.getElementById(this.id)
      this.context = this.canvas.getContext('2d')
    },
    // 数据初始化
    initParams() {
      this.canvas.height = this.$refs.canvasContainer2.offsetHeight
      this.canvas.width = this.$refs.canvasContainer2.offsetWidth
      this.r = this.canvas.height / 2 * this.zoomFactor// 外圆环的半径
      this.rBlack = this.canvas.height / 2.3 * this.zoomFactor // 中间黑圆半径
      this.rInner = this.canvas.height / 3 * this.zoomFactor// 内圆环的半径
      this.rBlackSmall = this.canvas.height / 7 * this.zoomFactor// 最中间黑圆半径
      this.cirX = this.canvas.width / 2 // 圆的中心坐标x
      this.cirY = this.canvas.height / 2 // 圆的中心坐标y
      this.outLine = this.canvas.width / 15
      this.toBeAngle()
    },
    // 重置canvas
    resetCanvas() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
    },
    // 绘制底圆
    drawBgCircle() {
      this.context.save()
      this.context.beginPath()
      this.context.fillStyle = '#EEF0F5'
      this.context.lineWidth = this.canvas.height * 0.15
      this.context.arc(this.cirX, this.cirY, this.r, 0, Math.PI * 2, false)
      this.context.fill() // 绘制边线
      this.context.restore()
    },
    // 绘制所占部分
    drawPartArc(myDatas, r) {
      var _that = this
      var start = 0// 起始弧度
      if (!myDatas) { return }
      myDatas.forEach(function(item, i) {
        var end = item.angle + start
        _that.context.beginPath()
        _that.context.moveTo(_that.cirX, _that.cirY)
        _that.context.arc(_that.cirX, _that.cirY, r, start, end)
        _that.context.fillStyle = _that.randomColor()
        _that.context.fill()

        // 调用标的方法
        _that.drawTitle(_that, start, item, _that.context.fillStyle)

        // 调用画小矩形
        // this.drawInfo(i, item.title, this.ctx.fillStyle)

        // 记录上一个结束的弧度
        start = end
      })
    },
    // 绘制中间的黑圆
    drawBlackCircle(r) {
      this.context.save()
      this.context.beginPath()
      this.context.fillStyle = '#000'
      this.context.lineWidth = this.canvas.height * 0.15
      this.context.arc(this.cirX, this.cirY, r, 0, Math.PI * 2, false)
      this.context.fill() // 绘制边线
      this.context.restore()
    },

    // 绘制label
    drawTitle(_that,start, item, color) {
      var that = _that
      // 斜边的长度
      var edge = that.r + that.outLine
      // x轴方向的直角边
      var edgeX = edge * Math.cos(start + item.angle / 2)
      // y轴方向的直角边
      var edgeY = edge * Math.sin(start + item.angle / 2)
      // 伸出去的横纵坐标
      var outX = that.cirX + edgeX
      var outY = that.cirY + edgeY
      that.context.beginPath()
      that.context.moveTo(that.cirX, that.cirY)
      that.context.lineTo(outX, outY)
      that.context.strokeStyle = color
      that.context.stroke()

      // 添加字体
      var align = outX > that.cirX ? 'left' : 'right'
      that.context.font = '12px 微软雅黑'
      that.context.textAlign = align
      that.context.textBaseline = 'bottom'
      that.context.fillStyle = color
      that.context.fillText(item.title, outX, outY)

      // 添加文字下面的线
      var textW = that.context.measureText(item.title).width
      that.context.moveTo(outX, outY)
      outX = outX > this.cirX ? outX + textW : outX - textW
      that.context.lineTo(outX, outY)
      that.context.stroke()
    },

    // 数据转成弧度
    toBeAngle() {
      // 先获取数据的总和
      var total = 0
      this.datas.forEach(function(item, index) {
        total += item.num
      })
      // 获取每条数据的弧度
      this.datas.forEach(function(item, index) {
        var angle = item.num / total * Math.PI * 2
        item.angle = angle
      })

      total = 0
      this.datasInner.forEach(function(item, index) {
        total += item.num
      })
      this.datasInner.forEach(function(item, index) {
        var angle = item.num / total * Math.PI * 2
        item.angle = angle
      })
    },

    // 获取随机颜色值
    randomColor() {
      var r = Math.floor(Math.random() * 256)
      var g = Math.floor(Math.random() * 256)
      var b = Math.floor(Math.random() * 256)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },

    // 自适应画笔
    resizeCanvas() {
      this.initParams()
      this.resetCanvas()
      this.drawBgCircle()
      this.drawPartArc(this.datas, this.r)
      this.drawBlackCircle(this.rBlack)
      this.drawPartArc(this.datasInner, this.rInner)
      this.drawBlackCircle(this.rBlackSmall)
    }

  }

}
</script>

<style scoped>
  .canvas-circle2-container{
    width: 100%;
    height: 100%;
  }
</style>
